Listing 2. Overview of login.aspx
The first line of login.aspx:

 
<%@ Page Language="C#" ContentType="text/html" ResponseEncoding="iso-8859-1" %>
 

The following section contains the Page_Load function.

If the page has been submitted (IsPostBack is true) the user's login credentials are checked (that part is omitted here for brevity but will be discussed in the next two sections: "Authenticate the login credentials" and "Create the FormsAuthenticationTicket (with RedirectFromLoginPage)".

If the user's authentication fails, the Text in the asp:Label named Msg is displayed.

(Notice that the form takes the user's e-mail address as the login name.)

 
<script language="C#" runat=server>
protected void Page_Load(Object Src, EventArgs E)
{
   if (IsPostBack)
   {
      // authenticate user
      // NOTE: how this check is done and a discussion of what happens is discussed in the 
      // next two sections: Authenticate the login credentials and 
      // Create the FormsAuthenticationTicket (with RedirectFromLoginPage).
      if (true)      
      {
         FormsAuthentication.RedirectFromLoginPage(emailaddr.Value, false);   
      }
      else 
      {
         Msg.Text = "Invalid Credentials: Please try again";
      }
   }
}
</script>
 

Here is the beginning of the HTML section of the page. Nothing exciting here:

 
<html>
<head>
<title>Login</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
 

The form tag is extremely simple. When you use runat=server the action is by default set to POST and you don't need to name it.

 
<form runat="server">
 

Here is the table that displays the login form. The username and password use input type=text form elements and both have runat=server so that we can use their values in the Page_Load method.

 
<table border="0" align="center" cellpadding="5" cellspacing="0">
    <tr bgcolor="#FF0000" class="bodyText"> 
      <td colspan="2"><div align="center" class="bodyReverse">Please login</div></td>
    </tr>
    <tr class="bodyText"> 
      <td><div align="right">Username:</div></td>
      <td><input id="emailaddr" type="text" runat="server"/></td>
    </tr>
    <tr class="bodyText"> 
      <td><div align="right">Password:</div></td>
      <td><input id="password" type=password runat="server"/></td>
    </tr>
 

The submit button for the page is a server-side input type=image tag that submits the page.

 
    <tr> 
      <td colspan="2"><div align="center"> 
      <input type=image id="submit" src="/images/login.gif" runat="server">
      <input type=image id="cancel" src="/images/cancel.gif"
         OnClick="document.forms[0].reset();" runat="server">
        </div></td>
    </tr>
 

The error message is displayed in the asp:Label. The text for this label is defined in the Page_Load function when the user's login credentials are invalid.

 
    <tr> 
      <td colspan="2"><div align="center"> 
      <asp:Label id="Msg" ForeColor="red" Font-Name="Verdana" Font-Size="10" runat=server />
        </div></td>
    </tr>
  </table>
</form>
</body>
</html>